<template>
  <div>

    <div id="ball"></div>
    <div id="ball-2"></div>
  </div>
</template>


<script lang="ts">


import { defineComponent, markRaw, onMounted, SetupContext } from 'vue';
import useD3LinkedList from '@/hooks/useD3LinkedList';
import { createAnimationTask } from '@/lib/y-animation';



class LockingTree {
  node: any;
  constructor(parent: number[]) {
    const node: any[] = [];
    parent.forEach((parentNode, nowNode) => {
      if ( !node[parentNode] ) {
        node[parentNode] = {
          state: 0,
          opeartor: undefined,
          childs: [nowNode],
        }
      } else {
        node[parentNode].childs.push(nowNode);
      }
      if ( !node[nowNode] ) {
        node[nowNode] = {
          parent: parentNode,
          state: 0,
          childs: [],
        }
      } else {
        node[nowNode].parent = parentNode;
      }
    });
    this.node = node;
    console.log(this.node);
  }

  lock(num: number, user: number): boolean {

    if ( this.node[num].state === 0) {
      this.node[num].state = 1;
      this.node[num].opeartor = user;
      return true;
    } else {
      return false;
    }
  }

  unlock(num: number, user: number): boolean {
    const lockNode = this.node[num];
    if (lockNode.state === 1 && lockNode.opeartor === user) {
      lockNode.state = 0;
      lockNode.opeartor = undefined;
      return true;
    } else {
      return false;
    }
  }

  upgrade(num: number, user: number): boolean {
    const isUpLock = (opNum: number) => {
      while(opNum !== -1) {
        if (this.node[opNum].state === 1) {
          return true;
        }
        opNum = this.node[opNum].parent;
      }
      return false;
    }

    let isChildLock = false;
    const findChildLock = (opNum: number) => {
      if (!isChildLock) {
        this.node[opNum].childs.forEach((item: number) => {
          if (this.node[item].state === 1) {
            isChildLock = true;
          }
          findChildLock(item);
        });
      }
    }

    const clearChildLock = (opNum: number) => {

      this.node[opNum].childs.forEach((item: number) => {
        if (this.node[item].state === 1) {
          this.node[item].state = 0;
          this.node[item].opeartor = undefined;
        }
        clearChildLock(item);
      });
    }

    findChildLock(num);

    if ( !isUpLock(num) && this.node[num].state !== 1 ) {

      findChildLock(num);

      if (isChildLock) {
        clearChildLock(num);
        this.node[num].state = 1;
        this.node[num].opeartor = user;
        return true;
      }
    }
    return false;
  }
}


export default defineComponent({ components: { },
setup(props: any, context: SetupContext ) {

  // onMounted(()=>{
  //   const animationTask = createAnimationTask();
  //   animationTask.register('width', 'ball', 200, 3000, 'ease', 'px', 50, ()=> {
  //     animationTask.register('border-radius', 'ball', 100, 3000, 'ease', 'px', 25)
  //     animationTask.register('height', 'ball', 200, 3000, 'ease', 'px', 50, () => {
  //       animationTask.register('translateX', 'ball', 500, 3000, 'ease', 'px', 0)
  //     })
  //   });

  //   animationTask.register('translateY', 'ball', 200, 3000, 'ease', 'px', 500, ()=>{}, false, 4000)


  //   animationTask.register('width', 'ball-2', 300, 3000, 'ease-in-out', 'px', 50)

  //   animationTask.register('translateY', 'ball-2', 400, 3000, 'ease-in-out', 'px', 0, ()=>{}, false, 2000)
  //   animationTask.register('translateX', 'ball-2', 400, 3000, 'ease', 'px', 0, ()=>{}, false, 3000)


  // })

  var obj = new LockingTree([-1,0,8,0,7,4,2,3,3,1])

  console.log(obj.upgrade(8, 39));
  console.log(obj.upgrade(5, 28));
  console.log(obj.upgrade(6, 33));
  console.log(obj.upgrade(9, 24));
  console.log(obj.lock(5, 22));
  console.log(obj.upgrade(1, 3));
  console.log(obj.lock(5, 20));
  console.log(obj.upgrade(0, 38));
  console.log(JSON.parse(JSON.stringify(obj.node))); 
  console.log(obj.lock(5, 14));
  console.log(obj.lock(6, 34));
  console.log(obj.lock(6, 28));

  // console.log(obj.unlock(7, 21));
  // console.log(obj.upgrade(1, 1));

  // console.log(obj.upgrade(1, 1));
  // console.log(obj.lock(8, 20));
  // console.log(obj.upgrade(5, 50));
  // console.log(obj.upgrade(5, 28));
  // console.log(obj.upgrade(0, 11));
  // console.log(JSON.parse(JSON.stringify(obj.node))); 
  // console.log(obj.lock(6, 19));

//["LockingTree","upgrade","upgrade","upgrade","upgrade","lock","upgrade","lock","upgrade","lock","lock","lock","upgrade","upgrade","upgrade","upgrade","lock","upgrade","lock","upgrade","unlock"]
//[[[-1,0,8,0,7,4,2,3,3,1]],[8,39],[5,28],[6,33],[9,24],[5,22],[1,3],[5,20],[0,38],[5,14],[6,34],[6,28],[3,23],[4,45],[8,7],[2,18],[3,35],[2,16],[3,21],[1,41],[5,22]]

  return {
    // heapMethods,
    // insertValue,
    // insertLoading,
    // removeLoading,
  };
},
}); 

</script>

<style scoped>

#ball {
  background: tomato;
  width: 50px;
  height: 50px;
  border-radius: 25px;
}

#ball-2 {
  margin-top: 20px;
  background: tomato;
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
.button-list div {
  display: inline-block;
  padding: 10px;
}
.loading-svg {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>